<script setup lang="ts">
import NdCardBoard from '@/components/modules/NdCards/index.vue';
import NdSvgIcon from '@/components/modules/NdSvgIcon.vue';
import IconView from '@/components/icons/View.vue';
import IconCheckbox from '@/components/icons/Checkbox.vue';
import IconOrder from '@/components/icons/Order.vue';
import { ref } from 'vue';
const cardLists = ref([
    {
        id: '1',
        title: '卡片列表1',
        cards: [
            {
                id: '1',
                title: '卡片1',
                order: '1',
            },
            {
                id: '2',
                title: '卡片2',
                order: '2',
            },
        ]
    },
    {
        id: '2',
        title: '卡片列表2',
        cards: [
            {
                id: '3',
                title: '卡片3',
                order: '1',
            },
            {
                id: '4',
                title: '卡片4',
                order: '2',
            },
        ]
    },
    {
        id: '3',
        title: '卡片列表3',
        cards: [
            {
                id: '5',
                title: '卡片5',
                order: '1',
            },
            {
                id: '6',
                title: '卡片6',
                order: '2',
            },
        ]
    },
]);
</script>

<template>
	<div>
		<nd-card-board
			v-model="cardLists"
		>
			<template #default="{card}">
				<div class="card-name">
					{{ card.title }}
				</div>
				<div class="card-states">
					<div class="card-state">
						<nd-svg-icon>
							<icon-view />
						</nd-svg-icon>
					</div>
					<div class="card-state">
						<nd-svg-icon>
							<icon-order />
						</nd-svg-icon>
					</div>
					<div class="card-state complate-state">
						<nd-svg-icon>
							<icon-checkbox />
						</nd-svg-icon>
						<div class="complete-state-content">
							1/1
						</div>
					</div>
				</div>
			</template>
		</nd-card-board>
	</div>
</template>
<style lang="scss">
@import '@/assets/scss/components/card.scss';
</style>